<template>
  <a-config-provider :locale="locale">
    <a-layout>
      <a-layout-sider
        :style="{ overflow: 'auto', height: '100vh' }"
        :width="94"
      >
        <div class="app-menus-container">
          <!-- 头像 -->
          <div class="app-avatar flex-center-center">
            <a-popover trigger="click" placement="bottomLeft">
              <template slot="content">
                <div class="user-drop-menus">
                  <!-- <div class="item flex-between-center">
                    <div class="text">
                      个人信息
                    </div>
                    <a-icon type="right" />
                  </div> -->
                  <div class="item flex-between-center" @click="logout">
                    <div class="text">
                      退出登录
                    </div>
                    <i class="iconfont iconexport" />
                  </div>
                </div>
              </template>
              <a-avatar
                :size="40"
                icon="user"
                style="color: #fff; backgroundColor: #cdcdcd"
                :src="userInfo.avatar"
              />
            </a-popover>
          </div>
          <!-- 模块 -->
          <div class="app-menus">
            <nuxt-link
              v-for="(menu, index) in appModule"
              v-show="!menu.is_hidden"
              :key="index"
              :to="menu.url"
              class="item"
            >
              <div class="icon">
                <a-icon :type="menu.icon_class" />
              </div>
              <div class="text">
                {{ menu.title }}
              </div>
            </nuxt-link>
          </div>
        </div>
      </a-layout-sider>
      <a-layout-sider
        v-show="subMenus.length > 0"
        :style="{ overflow: 'auto', height: '100vh' }"
        :width="128"
        theme="light"
      >
        <div class="app-submenus-container">
          <div class="menu-title flex-center-center">
            {{ currentModule.title }}
          </div>
          <AppMenus />
        </div>
      </a-layout-sider>
      <a-layout :style="{ height: '100vh', overflowY: 'auto' }">
        <a-layout-header
          style="background: #fff;padding:0 25px; border-bottom: 1px solid #ebedf0;"
        >
          <GlobalHeader />
        </a-layout-header>
        <a-layout-content v-if="isRouterAlive" style="padding:15px">
          <nuxt />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-config-provider>
</template>

<script>
import { mapGetters } from 'vuex'
import { removeStore } from '@/utils/storage'
import GlobalHeader from '@/components/The/GlobalHeader'
import AppMenus from '@/components/The/AppMenus/index'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import zh_TW from 'ant-design-vue/lib/locale-provider/zh_TW'
import en_US from 'ant-design-vue/lib/locale-provider/en_US'

import moment from 'moment'
import 'moment/locale/zh-cn'
import 'moment/locale/zh-tw'
import 'moment/locale/en-gb'
moment.locale('zh-cn')

const locales = {
  zh_CN,
  zh_TW,
  en_US
}

const momentLocales = {
  zh_CN: 'zh-cn',
  zh_TW: 'zh-tw',
  en_US: 'en-gb'
}
export default {
  name: 'AdminLayout',
  components: {
    GlobalHeader,
    AppMenus
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      theme: 'dark',
      menuWidth: 232,
      currentSubMenu: '',
      isRouterAlive: true
    }
  },
  computed: {
    ...mapGetters({
      appModule: 'menus/appModule',
      subMenus: 'menus/subMenus',
      currentModule: 'menus/currentModule',
      userInfo: 'user/userInfo'
    }),
    locale() {
      const lang = this.$store.state.i18n.locale
      moment.locale(momentLocales[lang])
      return locales[lang]
    },
    currntMenu() {
      return [this.$route.name]
    }
  },
  watch: {
    '$store.state.i18n.locale'(lang) {
      this.$i18n.locale = lang
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    },
    handleClick(e) {
      // console.log('click ', e)
    },
    // 退出登录
    logout() {
      removeStore('token')
      removeStore('userId')
      this.$router.push('/login')
    },
    linkTo(menu) {
      if (menu.children) {
        this.subMenus = menu.children
      }
      this.$router.push({ path: menu.path })
    }
  },
  head() {
    return {
      title: this.$t(this.$route.meta.title)
    }
  }
}
</script>
<style lang="less" scoped>
.app-avatar {
  height: 80px;
  padding: 25px;
}
.user-drop-menus {
  width: 200px;
  .item {
    border-bottom: 1px solid #f2f2f2;
    height: 40px;
    cursor: pointer;
    font-size: 14px;
    &:hover {
      color: #157afa;
    }
  }
}

// 模块
.app-menus {
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 60px;
    cursor: pointer;
    &.nuxt-link-active {
      background: #243440;
    }
    &:hover {
      background: #243440;
    }
    .icon {
      height: 26px;
      font-size: 18px;
      color: #ffffff;
    }
    .text {
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
    }
  }
}

// 二级菜单
.app-submenus-container {
  border-right: 1px solid #ebedf0;
  .menu-title {
    height: 64px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    padding: 0 16px;
    z-index: 1;
    border-bottom: 1px solid #ebedf0;
  }
}
</style>
